<template>
  <view
    v-if="initShow"
    v-show="show"
    class="pi-popup-content"
    :class="[
      modelClass,
      {
        'div-scale-phone': classShow,
        'div-scaleHide-phone': !classShow,
      },
    ]"
  >
    <view
      class="opacity"
      :class="classShow ? 'opacity-show' : 'opacity-hide'"
      @click="closeClick"
    ></view>
    <view
      :style="{ width: width ? width + 'px' : '520px' }"
      class="content-box"
      :class="classShow ? 'div-scale' : 'div-scaleHide'"
    >
      <div class="content-title">
        <div class="phone-go-back" @click="closeClick">返回</div>
        {{ title }}
      </div>
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  watch,
  defineProps,
  defineEmits,
  defineExpose,
  onMounted,
  computed,
} from "vue";

interface Props {
  /**标题 */
  title?: string;
  /**打开弹出框的 model */
  modelValue?: boolean;
  levelClass: string;
  width: number;
}
interface Events {
  (e: "close"): void;
  (e: "update:modelValue", val: boolean): void;
}
const props = withDefaults(defineProps<Props>(), {
  title: "",
  modelValue: false,
  levelClass: "",
  width: 523,
});
const emits = defineEmits<Events>();

const modelClass = computed(() => {
  let name = props.levelClass;
  return name + " " + classShow.value
    ? "div-scale-phone"
    : "div-scaleHide-phone";
});
/**
 * 组件html是否加载
 */
const initShow = ref(false);
/**
 * 显示/隐藏
 */
const show = ref(false);
/**
 * 动画显示/隐藏
 */
const classShow = ref(false);

/**
 * 打开弹出框
 */
const open = () => {
  if (!initShow.value) {
    initShow.value = true;
  }
  show.value = true;
  classShow.value = true;
};
/**
 * 关闭点击
 */
const closeClick = () => {
  classShow.value = false;
  setTimeout(() => {
    show.value = false;
    emits("close");
    emits("update:modelValue", false);
  }, 300);
};

/**
 * 监听 model
 */
watch(
  () => props.modelValue,
  (value) => {
    if (value) {
      open();
    } else {
      if (classShow.value) {
        closeClick();
      }
    }
  }
);

defineExpose({ open });

onMounted(() => {
  if (props.modelValue) {
    open();
  }
});
</script>

<style lang="less">
@import "./index.less";
</style>
